<template>
	<view class="webview-container">
		<!-- 模拟微信支付页面，不使用真实web-view -->
		<view class="mock-wechat-pay">
			<!-- 顶部导航栏 -->
			<view class="mock-header">
				<view class="header-title">微信支付</view>
			</view>
			
			<!-- 支付信息 -->
			<view class="pay-info">
				<view class="merchant-info">
					<image src="/static/logo.png" class="merchant-logo"></image>
					<view class="merchant-name">棋牌室</view>
				</view>
				
				<view class="amount-section">
					<view class="amount-label">支付金额</view>
					<view class="amount">¥{{payAmount}}</view>
				</view>
				
				<view class="order-info">
					<view class="order-item">
						<text class="label">订单编号</text>
						<text class="value">{{orderNo}}</text>
					</view>
					<view class="order-item">
						<text class="label">商品名称</text>
						<text class="value">{{orderType === 'reservation' ? '棋牌室预约' : (orderType === 'recharge' ? '账户充值' : '棋牌室服务')}}</text>
					</view>
					<view class="order-item">
						<text class="label">下单时间</text>
						<text class="value">{{currentTime}}</text>
					</view>
				</view>
			</view>
			
			<!-- 支付方式 -->
			<view class="payment-method">
				<view class="method-title">支付方式</view>
				<view class="method-item active">
					<view class="method-left">
						<image src="/static/icon/微信支付.png" class="method-icon"></image>
						<text class="method-name">微信支付</text>
					</view>
					<view class="method-check"></view>
				</view>
			</view>
			
			<!-- 支付安全提示 -->
			<view class="security-tips">
				<text>支付将通过微信安全支付</text>
			</view>
			
			<!-- 底部按钮 -->
			<view class="bottom-actions">
				<button class="cancel-btn" @click="handleCancel">取消支付</button>
				<button class="confirm-btn" @click="handleConfirm">确认支付 {{payAmount}}元</button>
			</view>
			
			<!-- 支付弹窗 -->
			<view class="pay-modal" v-if="showModal">
				<view class="modal-content">
					<view class="modal-header">
						<text class="modal-title">请输入支付密码</text>
						<text class="modal-close" @click="showModal = false">×</text>
					</view>
					<view class="modal-body">
						<view class="pay-amount">¥{{payAmount}}</view>
						<view class="password-input">
							<view class="password-item" v-for="(item, index) in passwordDisplay" :key="index">
								<text v-if="item">•</text>
							</view>
						</view>
						<view class="keyboard">
							<view class="keyboard-row">
								<view class="key" @click="handleKeyPress(1)">1</view>
								<view class="key" @click="handleKeyPress(2)">2</view>
								<view class="key" @click="handleKeyPress(3)">3</view>
							</view>
							<view class="keyboard-row">
								<view class="key" @click="handleKeyPress(4)">4</view>
								<view class="key" @click="handleKeyPress(5)">5</view>
								<view class="key" @click="handleKeyPress(6)">6</view>
							</view>
							<view class="keyboard-row">
								<view class="key" @click="handleKeyPress(7)">7</view>
								<view class="key" @click="handleKeyPress(8)">8</view>
								<view class="key" @click="handleKeyPress(9)">9</view>
							</view>
							<view class="keyboard-row">
								<view class="key empty"></view>
								<view class="key" @click="handleKeyPress(0)">0</view>
								<view class="key delete" @click="handleDelete">←</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			paymentUrl: '',
			orderId: '',
			payAmount: '0.00',
			orderNo: '',
			orderType: 'reservation',
			currentTime: '',
			showModal: false,
			password: '',
			passwordDisplay: ['', '', '', '', '', ''],
			isProcessing: false
		}
	},
	onLoad(options) {
		console.log('WebView页面加载, options:', options);
		
		// 获取订单ID
		this.orderId = options.orderId || uni.getStorageSync('CURRENT_ORDER_ID') || '';
		
		// 获取订单类型
		this.orderType = options.type || 'reservation';
		
		// 获取和设置支付金额
		const amount = options.amount || uni.getStorageSync('CURRENT_AMOUNT') || '88.00';
		this.payAmount = parseFloat(amount).toFixed(2);
		
		// 生成随机订单号
		this.orderNo = this.generateOrderNo();
		
		// 设置当前时间
		this.setCurrentTime();
		
		// 设置支付超时
		this.setupPaymentTimeout();
	},
	methods: {
		// 设置当前时间
		setCurrentTime() {
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const day = String(now.getDate()).padStart(2, '0');
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			const seconds = String(now.getSeconds()).padStart(2, '0');
			
			this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		
		// 生成随机订单号
		generateOrderNo() {
			const prefix = this.orderType === 'reservation' ? 'YY' : (this.orderType === 'recharge' ? 'CZ' : 'DD');
			const timestamp = new Date().getTime().toString();
			const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
			return `${prefix}${timestamp}${random}`;
		},
		
		// 处理取消支付
		handleCancel() {
			uni.showModal({
				title: '确认取消',
				content: '您确定要取消本次支付吗？',
				success: (res) => {
					if (res.confirm) {
						uni.navigateBack();
					}
				}
			});
		},
		
		// 处理确认支付
		handleConfirm() {
			this.showModal = true;
		},
		
		// 处理按键按下
		handleKeyPress(num) {
			if (this.password.length < 6) {
				this.password += num.toString();
				this.passwordDisplay[this.password.length - 1] = '•';
				
				// 如果密码输入完成，自动处理支付
				if (this.password.length === 6) {
					this.processPayment();
				}
			}
		},
		
		// 处理删除键
		handleDelete() {
			if (this.password.length > 0) {
				this.password = this.password.slice(0, -1);
				this.passwordDisplay[this.password.length] = '';
			}
		},
		
		// 处理支付
		processPayment() {
			// 延迟一点时间再处理，让用户看到完整的密码输入
			setTimeout(() => {
				this.showModal = false;
				
				// 显示处理中提示
				uni.showLoading({
					title: '处理中...'
				});
				
				// 模拟支付处理
				setTimeout(() => {
					uni.hideLoading();
					
					// 显示支付成功提示
					uni.showToast({
						title: '支付成功',
						icon: 'success',
						duration: 2000
					});
					
					// 跳转到支付结果页
					setTimeout(() => {
						uni.redirectTo({
							url: `/pages/payment/result?status=success&orderId=${this.orderId}`
						});
					}, 1500);
				}, 1500);
			}, 500);
		},
		
		// 设置支付超时
		setupPaymentTimeout() {
			// 3分钟支付超时
			setTimeout(() => {
				uni.showModal({
					title: '支付提醒',
					content: '支付时间已超过3分钟，是否继续支付？',
					confirmText: '继续支付',
					cancelText: '取消支付',
					success: (res) => {
						if (!res.confirm) {
							// 用户取消支付，返回上一页
							uni.navigateBack();
						}
					}
				});
			}, 3 * 60 * 1000); // 3分钟
		}
	}
}
</script>

<style>
.webview-container {
	width: 100%;
	height: 100vh;
	background-color: #f7f7f7;
}

.mock-wechat-pay {
	background-color: #f7f7f7;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.mock-header {
	background-color: #2aae67;
	height: 90rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.header-title {
	color: #fff;
	font-size: 36rpx;
	font-weight: 500;
}

.pay-info {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 10rpx;
	padding: 30rpx;
}

.merchant-info {
	display: flex;
	align-items: center;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #eee;
}

.merchant-logo {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.merchant-name {
	font-size: 32rpx;
	font-weight: 500;
}

.amount-section {
	padding: 40rpx 0;
	border-bottom: 1rpx solid #eee;
	text-align: center;
}

.amount-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.amount {
	font-size: 64rpx;
	font-weight: bold;
}

.order-info {
	padding-top: 30rpx;
}

.order-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.order-item .label {
	color: #666;
	font-size: 28rpx;
}

.order-item .value {
	color: #333;
	font-size: 28rpx;
}

.payment-method {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 10rpx;
	padding: 30rpx;
}

.method-title {
	font-size: 30rpx;
	font-weight: 500;
	margin-bottom: 30rpx;
}

.method-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.method-left {
	display: flex;
	align-items: center;
}

.method-icon {
	width: 50rpx;
	height: 50rpx;
	margin-right: 20rpx;
}

.method-name {
	font-size: 30rpx;
}

.method-check {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	border: 2rpx solid #2aae67;
	display: flex;
	justify-content: center;
	align-items: center;
}

.method-item.active .method-check:after {
	content: '';
	width: 24rpx;
	height: 24rpx;
	border-radius: 50%;
	background-color: #2aae67;
}

.security-tips {
	text-align: center;
	margin: 30rpx 0;
}

.security-tips text {
	font-size: 26rpx;
	color: #999;
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 20rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.cancel-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #f7f7f7;
	color: #333;
	font-size: 30rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.confirm-btn {
	flex: 2;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #2aae67;
	color: #fff;
	font-size: 30rpx;
	border-radius: 10rpx;
}

/* 支付弹窗样式 */
.pay-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.modal-content {
	width: 80%;
	background-color: #fff;
	border-radius: 10rpx;
	overflow: hidden;
}

.modal-header {
	padding: 30rpx;
	text-align: center;
	position: relative;
	border-bottom: 1rpx solid #eee;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 500;
}

.modal-close {
	position: absolute;
	right: 30rpx;
	top: 30rpx;
	font-size: 36rpx;
	color: #999;
}

.modal-body {
	padding: 30rpx;
}

.pay-amount {
	text-align: center;
	font-size: 48rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
}

.password-input {
	display: flex;
	height: 100rpx;
	border: 1rpx solid #ddd;
	margin-bottom: 40rpx;
}

.password-item {
	flex: 1;
	height: 100%;
	border-right: 1rpx solid #ddd;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
}

.password-item:last-child {
	border-right: none;
}

.keyboard {
	margin-top: 20rpx;
}

.keyboard-row {
	display: flex;
	margin-bottom: 20rpx;
}

.key {
	flex: 1;
	height: 100rpx;
	background-color: #f7f7f7;
	margin: 0 10rpx;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
	font-weight: 500;
}

.key.empty {
	background-color: transparent;
}

.key.delete {
	font-size: 40rpx;
}
</style> 